<template>
  <div class="loginWrapper">
    <div class="login-logo" />
    <div class="login-view">
      <div class="login-card">
        <div class="login-title">
          <p class="fz_25">登录</p>
          <p class="fz_15">{{appName}}</p>
        </div>
        <div v-if="typeCode" id="code-login" class="code-login" />
        <div v-if="!typeCode" class="form-login">
          <el-form
            ref="form"
            v-model="form"
            class="form"
            label-position="right"
            size="large"
          >
            <el-form-item prop="username">
              <el-input
                v-model="form.username"
                prefix-icon="el-icon-user-solid"
                placeholder="输入登录用户名"
              />
            </el-form-item>
            <el-form-item prop="pwd">
              <el-input
                v-model="form.pwd"
                prefix-icon="el-icon-unlock"
                placeholder="输入用户密码"
                type="password"
                show-password
                class="pwd"
              />
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button
              type="success"
              class="login-btn"
              :loading="loading"
              @click="submit"
            >
              登录
            </el-button>
          </div>
        </div>
        <div class="login-type" @click="typeSwitch">切换至扫码登录</div>
      </div>
    </div>
    <div class="login-footer" />
  </div>
</template>

<script>
import {APP_NAME} from "@/config/env"
export default {
  data() {
    return {
      appName: APP_NAME,
      loading: false,
      form: {
        username: "",
        pwd: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名，6到32位", min: 6, max: 32 },
        ],
        pwd: [
          { required: true, message: "请输入密码，6到32位", min: 6, max: 32 },
        ],
      },
      typeCode: true, // true 扫码登录，false表单登录
    };
  },
  methods: {
    typeSwitch() {
      this.typeCode = !this.typeCode;
    },
    submit() {
      this.$router.push("/");
    },
  },
};
</script>
<style lang="scss">
.loginWrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.login-logo {
  width: 120px;
  height: 26px;
  background-image: url("../../assets/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: fixed;
  top: 30px;
  left: 100px;
}
.login-view {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 350px;
  .form {
    background: #fff;
  }
  .code-login {
    width: 100%;
    height: 350px;
    background: #fff;
  }
  .form-login {
    height: 259px;
    padding-top: 60px;
    iframe {
      display: none;
    }
  }

  .el-card__body {
    padding: 20px 30px;
  }
  .el-form-item {
    margin: 0;
  }
  .el-input__inner {
    border: 0;
    border-radius: 0;
  }
  .pwd {
    border: 1px solid #f5f6fa;
  }
}
.login-title {
  // margin-bottom: 60px;
  p {
    text-align: center;
  }
  .fz_25 {
    font-size: 25px;
  }
  .fz_15 {
    font-size: 15px;
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.login-btn {
  width: 100px;
  padding: 12px 0;
  font-size: 16px;
  // margin-top: 10px;
  // margin-bottom: 20px;
}
.login-type {
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
  color: #666;
}
.login-footer {
  width: 405px;
  height: 14px;
  background-image: url("../../assets/foot.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
}
</style>
